<template>
    <!-- 0-借款保证金 1-出口保证金 -->
    <view class="margin-body">
        <view class="margin-content">
            <view class="u-flex u-row-between">
                <view class="margin-amount">
                    <text class="u-margin-right-20">保证金金额</text>
                    <text>￥{{item.amount | thousands}}</text>
                </view>
                <view class="status">
                    <!-- isDepositUploaded false 未上传  true 已上传-->
                    <text v-if="type === 0 && item.isDepositUploaded">待上传</text>
                    <text v-else-if="type === 1 && !item.payProofUrl">待上传</text>
                    <text v-else>已上传</text>
                </view>
            </view>
            <view class="ood-number">
                <text v-if="type === 0">销售申请单号：</text>
                <text v-else-if="type === 1">出口申请单号：</text>
                <text>{{item.innerId}}</text>
            </view>
        </view>
        <u-line color="#F2F2F2" />
        <view class="margin-button">
            <u-button v-if="type === 0 && item.isDepositUploaded" @click="handleProofOpen" shape="circle" :custom-style="buttonCustomStyle">上传保证金凭证</u-button>
            <u-button v-else-if="type === 1 && !item.payProofUrl" @click="handleProofOpen" shape="circle" :custom-style="buttonCustomStyle">上传保证金凭证</u-button>
            <u-button v-else @click="openFile(item.payProofUrl)" shape="circle" :custom-style="buttonCustomStyle">查看凭证</u-button>
        </view>

        <u-popup closeable v-model="shows.proof" mode="bottom" border-radius="12">
            <view class="proof-header_title">上传保证金凭证</view>
            <view class="proof-body">
                <!-- 保证金 -->
                <view class="proof-title">保证金</view>
                <view class="amount-body">
                    <view style="color: #202020;">总计保证金金额</view>
                    <view style="color: #F76260;">￥{{item.amount| thousands}}</view>
                </view>
                <!-- 上传附件 -->
                <view class="proof-title">上传附件</view>
                <view class="u-margin-bottom-60">
                    <c-upload v-model="file" type="String" />
                </view>

                <u-button type="success" shape="circle" :custom-style="buttonStyle" @click="handleSubmit">确认上传</u-button>
            </view>
        </u-popup>
    </view>
</template>

<script>
import {
    openFile
} from '@/utils/index.js'
import cUpload from '@/components/c-upload/index.vue'
export default {
    components: {
        cUpload
    },
    data () {
        return {
            shows: {
                proof: false
            },
            file: "",
            buttonCustomStyle: {
                'height': '26px',
                'font-size': '13px'
            },
            buttonStyleMini: {
                width: "160rpx",
                height: "60rpx",
                background: "#0FBD7F",
                color: "#FFF",
                fontSize: "28rpx"
            },
            buttonStyle: {
                width: "610rpx",
                height: "96rpx",
                background: "#0FBD7F",
                color: "#FFF",
                fontSize: "34rpx",
                boxShadow: "0rpx 4rpx 12rpx 0rpx rgba(1,139,31,0.5)"
            },
        }
    },
    props: {
        type: {
            type: Number,
            default: 0
        },
        // 0-借款保证金 1-出口保证金 
        item: {
            type: Object,
            default: {}
        }
    },
    methods: {
        handleProofOpen () {
            this.file = ""
            this.shows.proof = true
        },
        async handleSubmit () {
            if (!this.file) {
                this.$toast('请上传附件')
                return
            }
            this.shows.proof = false
            const params = {
                id: this.item.id,
                file: this.file
            }
            if (this.type === 0) {
                await this.$api.setUploadDeposit(params)
            } else if (this.type === 1) {
                await this.$api.setUploadOutDeposit(params)
            }
            this.$emit('change')
        },
        openFile
    }
}
</script>

<style scoped lang="less">
.proof-header_title {
    margin-top: 30rpx;
    font-weight: bold;
    color: #202020;
    font-size: 16px;
    text-align: center;
}

.proof-body {
    padding: 20px 20px 30px 20px;

    .proof-title {
        font-size: 13px;
        color: #525252;
        margin-bottom: 15px;
    }

    .amount-body {
        padding: 11px 15px;
        background: #f7f7f7;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
    }
}

.margin-body {
    background: #fff;
    background: #ffffff;
    box-shadow: 0px 3 4px 0px rgba(217, 226, 233, 0.38);
    border-radius: 8px;
    margin-top: 8px;

    .margin-content {
        padding: 15px 15px 11px 15px;

        .margin-amount {
            font-size: 14px;
            color: #202020;
            font-weight: 500;
        }

        .status {
            font-size: 14px;
            font-weight: 500;
            color: #0fbd7f;
        }

        .ood-number {
            font-size: 12px;
            color: #8a8a8a;
            margin-top: 10px;
        }
    }

    .margin-button {
        padding: 10px 15px;
        display: flex;
        justify-content: flex-end;
    }
}
</style>